<template>
    <div class="drop-container">
        <el-form label-width="80px" :label-position="form.labelPosition">
            <div class="drop-container-box">
                <draggable class="drag-container"
                           v-model="form.formList"
                           handle=".move"
                           chosenClass="chosen"
                           forceFallback="true"
                           group="layout"
                           animation="500"
                           scroll="true"
                           @update="update"
                           :move="move"
                           @sort="scrollFn"
                           @add="add">
                    <transition-group :style="{'min-height':windowHeight-113+'px','display':'block'}">
                        <div :class="[indexParam.groupIndex===index&&indexParam.commonIndex<0?'item active':'item']"
                             v-for="(element,index) in form.formList" :key="index.toString()">
              <span class="delete"
                    title="delete"
                    @click="handleDelete({groupIndex:index,commonIndex:-1})"
              >
                <i class="el-icon-delete"></i>
              </span>
                            <span class="setting"
                                  title="setting"
                                  @click="handleGetSettingIndex({groupIndex:index,commonIndex:-1})"
                            >
                <i class="el-icon-setting"></i>
              </span>
                            <span class="move" title="move"><i class="el-icon-rank"></i></span>
                            <Group
                                    :config="element"
                                    :index="index"
                                    :indexParam="indexParam"
                                    @changeForm="changeForm"
                                    @handleDelete="handleDelete"
                                    @handleInitRightData="handleInitRightData"
                                    @handleGetSettingIndex="handleGetSettingIndex">
                            </Group>
                        </div>
                    </transition-group>
                </draggable>
            </div>
        </el-form>
    </div>
</template>

<script>
    import Vue from 'vue';
    import draggable from 'vuedraggable';
    import assembly from '@/config/assembly';//导入组件数据
    import Group from '../diy/Group/Group';

    import {Form, MessageBox} from 'element-ui';

    Vue.use(Form);

    export default {
        name: 'DropContainer',
        data() {
            return {
                windowHeight: 0,//屏幕高度
                assemblyParams: assembly.assemblyParams
            }
        },
        mounted() {
            this.windowHeight = document.documentElement.clientHeight;
        },
        components: {
            draggable,
            Group
        },
        props: {
            form: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            indexParam: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        methods: {
            /**
             * 监听添加组件事件
             * @param e
             */
            add(e) {
                const type = e.item.dataset.type;//组件类型
                const index = e.newDraggableIndex;
                const form = this.form;
                const formList = form.formList;
                const assemblyParams = this.assemblyParams;
                const currentAssembly = assemblyParams[type];
                currentAssembly.index = new Date().getTime().toString();
                const newItem = Object.assign({}, formList[index], currentAssembly);
                formList[index] = newItem;
                form.formList = formList;
                Vue.set(this.form.formList, index, newItem);
                this.$emit('handleSetFormList', {index, newItem});

            },
            /**
             * 监听拖拽移动事件
             * @param e
             * @returns {boolean}
             */
            move(e) {
                //阻止组件反向拖拽
                if (e.related.dataset.type === 'group') {
                    return false;
                }
            },
            scrollFn(e) {
                console.log(e);
                this.handleInitRightData();
            },
            update(e) {
                console.log(e);
                this.handleInitRightData();
            },
            /**
             * 修改表单列表
             * @param data
             */
            changeForm(data) {
                const formList = this.form.formList;
                Vue.set(formList, data.index, data.data);
                const newItem = formList[data.index] = data.data;
                this.$emit('handleSetFormList', {index: data.index, newItem});
            },
            /**
             * 设置数组下标
             * @param indexParam
             */
            handleGetSettingIndex(indexParam) {
                this.$emit('handleGetSettingIndex', indexParam);
            },
            /**
             * 删除组件
             * @param indexParam
             */
            handleDelete(indexParam) {
                MessageBox.confirm('此操作将删除该组件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$emit('handleDelete', indexParam);
                }).catch(() => {
                });
            },
            /**
             * 初始化数据
             */
            handleInitRightData() {
                this.$emit('handleInitRightData', {});
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    @import "drop.less";
</style>
